import React from "react";
import { useDispatch } from "react-redux";
import { Swiper, Image, Flex } from "react-vant";
import { ClassifyListItem } from '../../store/classify/classSlice'
import { addCar } from '../../store/car/carSlice'
export const SubItem: React.FC<{ v: ClassifyListItem }> = ({ v }) => {
  const dispatch = useDispatch()
  const handleAddCar = (title, url, id) => {
    dispatch(addCar({ 
      color: '未知', 
      size: '未知', 
      count: 1, 
      title,
      url,
      id,
      desc: '123',
      price: Math.random() * 100
     }))
  }
  return (
    <div>
      <Swiper>
        {v.props.banner.map((image) => (
          <Swiper.Item key={image}>
            <Image lazyload src={image} width="100%" />
          </Swiper.Item>
        ))}
      </Swiper>

      <Flex wrap="wrap" style={{ marginTop: 10 }}>
        {v.props.subList.map((v) => {
          return (
            <Flex.Item key={v.id} span={8}>
              <dl>
                <dt>
                  <img src={v.url} alt="" />
                </dt>
                <dd>
                  <h4>{v.title}</h4>
                  <b onClick={ () => handleAddCar(v.title, v.url, v.id) }>+</b>
                </dd>
              </dl>
            </Flex.Item>
          );
        })}
      </Flex>
    </div>
  );
};
